<template>
  <div class="box">
    <div class="user">
      <el-avatar
        :size="100"
        :src="
          profileInfo.avatar
            ? profileInfo.avatar
            : 'https://rs.dance365.com/default_head@3x.png?imageView2/0/w/200/h/1200/ignore-error/1'
        "
        class="avatar"
      />
      <h2>{{ profileInfo.account }}</h2>
      <h3 style="color: #f936a4">您还不是会员</h3>
      <h4>开通会员平均每年可省：￥9500</h4>
    </div>
    <el-row
      :gutter="20"
      justify="space-evenly"
      style="width: 100%; margin-top: 20px"
    >
      <el-col
        :span="7"
        v-for="(item, index) in vipInfo"
        :key="item.id"
        style="width: 218px; margin-bottom: 30px"
        @click="changenum(index, item.data.total_price)"
      >
        <div
          class="ep-bg-purple state"
          :class="indexNum === index ? 'active' : ''"
        >
          <p>{{ item.data.title }}</p>
          <div style="margin: 15px auto">
            ￥<span style="font-size: 30px">{{ item.data.total_price }}</span>
          </div>
          <p>{{ item.data.reduced ? `折合￥${item.data.reduced}` : "" }}</p>
        </div>
      </el-col>
    </el-row>
    <a
      href="https://www.dance365.com/pay?from=my_member&orderId=ff8080818499295c0184994fca642159"
    >
      <div class="paybtn" @click="open">
        <span>立即以{{ paynum }}元开通</span>
      </div>
    </a>
    <p style="font-size: 14px">
      开通即视为同意
      <a
        href="https://www.dance365.com/vip-agreement"
        target="_blank"
        style="color: #fa3684; text-decoration: none"
        >《会员服务协议》</a
      >
    </p>
    <el-divider />
    <h2 style="margin: 0 0 20px -840px; font-size: 20px">会员专属权益</h2>
    <el-row
      :gutter="20"
      v-for="item in 3"
      :key="item"
      justify="space-evenly"
      style="width: 100%"
    >
      <el-col :span="4" v-for="item in 6" :key="item">
        <el-popover
          placement="top-start"
          :width="200"
          trigger="hover"
          popper-style=" border: 2px solid #fca9c4; padding: 20px; border-radius: 8px;"
        >
          <template #default>
            <el-avatar
              src="https://rs.dance365.com/member_preferential.png"
              style="border: 1px solid #fca9c4; background-color: #fff"
            />
            <span
              >会员购买非会员专区标有会员“立减”金额的视频课、直播课、线下课等商品服务，可获会员专属立减优惠！</span
            >
            <span>会员优惠很省钱... 几十... 几千... 买的越多，省的越多！</span>
          </template>
          <template #reference>
            <div class="grid-content ep-bg-purple">
              <el-image
                class="image"
                l
                src="https://rs.dance365.com/member_preferential.png"
              ></el-image>
              <span>非会员专区课程可获会员立减优惠</span>
            </div>
          </template>
        </el-popover>
      </el-col>
    </el-row>
    <el-divider style="margin-bottom: 50px" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Vip",
});
</script>
<script lang="ts" setup>
import { reqInterestList, reqProfile, reqVip } from "@/api/profile";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";

const profileInfo = ref<any>({});
const vipInfo = ref<any>({});

onMounted(async () => {
  try {
    const re = await reqProfile();
    const re2 = await reqVip();
    const re3 = await reqInterestList();
    profileInfo.value = re.data;
    vipInfo.value = re2.data;
  } catch (e: any) {
    alert(e.message);
  }
});
const open = () => {
  ElMessage({
    showClose: true,
    message: "支付成功！",
    type: "success",
  });
};
const paynum = ref<number>(588);
const indexNum = ref<number>(1);
const changenum = (idx: number, price: number) => {
  indexNum.value = idx;
  paynum.value = price;
};
</script>
<style scoped lang="scss">
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;

  .user {
    width: 300px;
    margin: 0 auto;
    cursor: pointer;
    position: relative;
    margin-bottom: 20px;

    h2 {
      position: absolute;
      top: 20px;
      left: 120px;
      font-size: 20px;
      color: #000;
      font-weight: 500;
    }

    h3 {
      position: absolute;
      top: 60px;
      left: 120px;
      font-size: 14px;
      font-weight: 400;
    }

    h4 {
      font-size: 16px;
      font-weight: 400;
    }
  }

  .el-row {
    margin-bottom: 20px;
  }

  .el-row:last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    white-space: normal;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    border-radius: 8px;
    border: 1px solid #e3e3e3;

    .image {
      margin-top: 20px;
      width: 46px;
      height: 42px;
    }
  }

  .state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 150px;
    border: 1px solid #b1b5c1;
    background-color: #ffffff;
    line-height: 1.15;
    cursor: pointer;
    border-radius: 10px;
    box-sizing: border-box;
  }

  .active {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    height: 150px;
    border: 2px solid #f93684;
    background-color: #f9ebf1;
    color: #f93684;
    line-height: 1.15;
    cursor: pointer;
    border-radius: 10px;
    box-sizing: border-box;
  }

  .paybtn {
    width: 330px;
    height: 46px;
    font-size: 16px;
    margin: 30px auto 12px;
    border-radius: 10px;
    background: linear-gradient(-56deg, #ff4683, #ff638f);
    color: #fff;
    cursor: pointer;
    padding: 9px 15px;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    position: relative;

    span {
      position: absolute;
      top: 23px;
      left: 120px;
      color: #fff;
      cursor: pointer;
    }
  }
}
</style>
